<template>
    <el-menu  class="el-menu-demo" mode="horizontal" gutter="px">

        <el-submenu index="1">
            <template slot="title"><span>目的地</span></template>
            <div v-for="country in country_list" :key="country.name">
            <el-submenu :index="country.name" >
               <template slot="title"><span @click="go_country(country)">{{country.name}}</span></template>
                <div v-for="place in country.place_list" :key="place.name" >
                <el-menu-item :index="place.name"><span @click="go_place(place)">{{place.name}}</span></el-menu-item>
                </div>
            </el-submenu>
                </div>

        </el-submenu>

        <el-submenu index="2">
            <template slot="title"><span>兴趣主题</span></template>
            <div v-for="category in category_list" :key="category.pk">
            <el-menu-item ><img :src="category.icon" alt="" height="20px" style="margin-bottom: 5px"> <span @click="go_category(category)">{{category.name}}</span></el-menu-item>
            <p>&nbsp;</p>
           </div>

        </el-submenu>

        <el-menu-item index="3"><span @click="go_discount">促销方案</span></el-menu-item>
        <el-menu-item index="4">关于我们</el-menu-item>
    </el-menu>
</template>

<script>
    export default {
        data() {
            return {
                country_list:'',
                category_list:'',
                length:'',

            };
        },
        methods: {
            go_country(obj){
                let url = '/country/'+obj.pk;
                this.$router.push(url);
                this.$emit('get_product_id')
            },
            go_place(obj){
                let url = '/place/'+obj.id;
                this.$router.push(url);
                this.$emit('get_place_id')
            },
            go_category(obj){
                let url = '/category/'+obj.pk;
                this.$router.push(url);
                this.$emit('get_category_id')
            },
            go_discount(){
                 let url = '/discount';
                this.$router.push(url);
                this.$emit('get_discount')
            }

        },
        created(){
            this.$axios({
                url:this.$settings.base_url+'/home/country_list'
            }).then(response =>{
                this.country_list = response.data;

            });
            this.$axios({
                url:this.$settings.base_url+'/home/nav_category'
            }).then(response =>{
                this.category_list = response.data;

            });
        }
    }
</script>

<style scoped>


    li.el-menu-item {
        font-size: 20px ;
    }

    .el-menu.el-menu--horizontal {
        border-bottom: black;
        margin-left: 150px;
    }

    .el-submenu span{
        font-size: 20px;
    }

</style>